<div id="conversation-details" class="panel__page panel__page--visible conversation-details" data-bind="with: $root.conversationDetails">
  <!-- ko if: isVisible() -->
    <div class="panel__header panel__header--reverse">
      <close-icon class="right-panel-close icon-button" data-bind="click: clickOnClose" data-uie-name="do-close"></close-icon>
      <!-- ko if: !conversationEntity().is_request() && !conversationEntity().removed_from_conversation() -->
        <mute-icon class="right-panel-mute icon-button" data-bind="click: clickToToggleMute, css: {'right-panel-mute--active': conversationEntity().is_muted()} " data-uie-name="do-mute"></mute-icon>
      <!-- /ko -->
    </div>
    <div class="panel__content">
      <div class="panel__content__scroll" data-bind="antiscroll: shouldUpdateScrollbar">
        <div class="conversation-details__header">
          <!-- ko if: isNameEditable() -->
            <div class="conversation-details__name" data-bind="visible: !isEditingName(), click: clickToEditGroupName, l10n_tooltip: z.string.tooltipConversationDetailsRename" data-uie-name="status-name">
              <div class="conversation-details__name" data-bind="text: conversationEntity().display_name()"></div>
              <edit-icon class="conversation-details__name__edit-icon"></edit-icon>
              <!-- ko if: isVerified() -->
                <verified-icon class="conversation-details__name__verified-icon-right" data-uie-name="status-verified-conversation"></verified-icon>
              <!-- /ko -->
            </div>
            <textarea class="conversation-details__name conversation-details__name--input" spellcheck="false" data-bind="visible: isEditingName, value: conversationEntity().display_name(), enter: renameConversation, hasFocus: isEditingName, resize" maxlength="64" dir="auto" data-uie-name="enter-name"></textarea>
          <!-- /ko -->
          <!-- ko ifnot: isNameEditable() -->
            <div class="conversation-details__name" data-bind="css: {'conversation-details__name--centered': conversationEntity().is_one2one}">
              <div class="conversation-details__flex-row">
                <!-- ko if: isVerified() -->
                  <verified-icon class="conversation-details__name__verified-icon" data-uie-name="status-verified-conversation"></verified-icon>
                <!-- /ko -->
                <div data-bind="text: conversationEntity().display_name()" data-uie-name="status-name"></div>
              </div>
            </div>
          <!-- /ko -->

          <!-- ko if: conversationEntity().is_group() -->
            <div class="conversation-details__participant_count">
              <!-- ko if: userParticipants().length -->
                <span class="conversation-details__participant_count__user">
                  <span class="conversation-details__participant_count__number" data-bind="text: userParticipants().length" data-uie-name="status-user-count"></span>
                  <span class="conversation-details__participant_count__text" data-bind="l10n_text: participantsUserText"></span>
                </span>
              <!-- /ko -->
              <!-- ko if: serviceParticipants().length -->
                <span class="conversation-details__participant_count__service">
                  <span class="conversation-details__participant_count__number" data-bind="text: serviceParticipants().length" data-uie-name="status-service-count"></span>
                  <span class="conversation-details__participant_count__text" data-bind="l10n_text: participantsServiceText"></span>
                </span>
              <!-- /ko -->
            </div>
          <!-- /ko -->
          <!-- ko if: isSingleUserMode() && userName() -->
            <div class="conversation-details__user-name" data-bind="text: userName()" data-uie-name="status-username"></div>
          <!-- /ko -->
        </div>

        <!-- ko if: isActiveParticipant() -->
          <div class="conversation-details-top-actions">
            <!-- ko if: showActionAddParticipants() -->
              <div class="conversation-details__participant-options">
                <div class="panel__action-item" data-bind="click: clickOnAddParticipants, attr:{'title': addPeopleTooltip}" data-uie-name="go-add-people">
                  <add-participants-icon class="panel__action-item__icon"></add-participants-icon>
                  <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionAddParticipants"></div>
                </div>
              </div>
              <!-- ko if: showActionGuestOptions() -->
                <div class="conversation-details__guest-options">
                  <div class="panel__action-item" data-bind="click: clickOnGuestOptions" data-uie-name="go-guest-options">
                    <guest-icon class="panel__action-item__icon"></guest-icon>
                    <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionGuestOptions"></div>
                    <div class="panel__action-item__status" data-bind="l10n_text: guestOptionsText" data-uie-name="status-allow-guests"></div>
                    <disclose-icon></disclose-icon>
                  </div>
                </div>
              <!-- /ko -->
            <!-- /ko -->
          </div>
        <!-- /ko -->

        <div class="conversation-details__participants">
          <!-- ko if: conversationEntity().is_group() -->
            <!-- ko if: userParticipants().length -->
              <div class="conversation-details__list-head" data-bind="text: z.string.conversationDetailsPeople"></div>
              <user-list params="user: userParticipants, click: clickOnShowParticipant, altStyle: true" data-uie-name="list-users"></user-list>
            <!-- /ko -->

            <!-- ko if: serviceParticipants().length -->
              <div class="conversation-details__list-head" data-bind="text: z.string.conversationDetailsServices"></div>
              <service-list params="services: serviceParticipants, click: clickOnShowParticipant, altStyle: true" data-uie-name="list-services"></service-list>
            <!-- /ko -->
          <!-- /ko -->
          <!-- ko if: isSingleUserMode() && conversationEntity().firstUserEntity() -->
            <participant-avatar params="participant: conversationEntity().firstUserEntity, size: z.components.ParticipantAvatar.SIZE.X_LARGE" data-uie-name="status-profile-picture"></participant-avatar>
            <!-- if: isTeam() -->
              <availability-state class="conversation-details__availability"
                data-uie-name="status-availability"
                params="availability: conversationEntity().firstUserEntity().availability(), label: availabilityLabel()">
              </availability-state>
            <!-- /ko -->
          <!-- /ko -->
        </div>

        <!-- ko if: showActionDevices() -->
          <div class="conversation-details__devices">
            <div class="panel__action-item" data-bind="click: clickOnDevices" data-uie-name="go-devices">
              <devices-icon class="panel__action-item__icon"></devices-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionDevices"></div>
              <disclose-icon></disclose-icon>
            </div>
          </div>
        <!-- /ko -->

        <div class="conversation-details__bottom-actions">
          <!-- ko if: showActionCreateGroup() -->
            <div class="panel__action-item" data-bind="click: clickOnCreateGroup" data-uie-name="go-create-group">
              <group-icon class="panel__action-item__icon"></group-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionCreateGroup"></div>
            </div>
          <!-- /ko -->
          <div class="panel__action-item" data-bind="click: clickToArchive" data-uie-name="do-archive">
            <archive-icon class="panel__action-item__icon"></archive-icon>
            <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionArchive"></div>
          </div>
          <!-- ko if: showActionCancelRequest() -->
            <div class="panel__action-item" data-bind="click: clickToCancelRequest" data-uie-name="do-cancel-request">
              <close-icon class="panel__action-item__icon"></close-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionCancelRequest"></div>
            </div>
          <!-- /ko -->
          <!-- ko if: showActionClear() -->
            <div class="panel__action-item" data-bind="click: clickToClear" data-uie-name="do-clear">
              <delete-icon class="panel__action-item__icon"></delete-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionClear"></div>
            </div>
          <!-- /ko -->
          <!-- ko if: showActionBlock() -->
            <div class="panel__action-item" data-bind="click: clickToBlock" data-uie-name="do-block">
              <block-icon class="panel__action-item__icon"></block-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionBlock"></div>
            </div>
          <!-- /ko -->
          <!-- ko if: showActionLeave() -->
            <div class="panel__action-item" data-bind="click: clickToLeave" data-uie-name="do-leave">
              <leave-icon class="panel__action-item__icon"></leave-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionLeave"></div>
            </div>
          <!-- /ko -->
        </div>
      </div>
    </div>
  <!-- /ko -->
</div>
